<template>
  <div class="app-container">
    <div class="table-box">
      <!-- 搜索区 开始 -->
      <div class="search-box">
        <el-form ref="listQuery" :model="listQuery" label-width="90px">
          <el-row>
            <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
              <el-row>
                <!-- 表单元素 开始 -->
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <el-form-item
                    :label="$t('common.status')"
                    prop="status"
                    class="select-class"
                  >
                    <el-select
                      v-model="listQuery.status"
                      :placeholder="$t('common.pleaseSelect')"
                      clearable
                    >
                      <el-option
                        v-for="item in statusOptions"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <el-form-item
                    :label="$t('common.keywords')"
                    prop="keywordsValue"
                  >
                    <el-input
                      v-model="listQuery.keywordsValue"
                      :placeholder="$t('common.pleaseEnterKeywords')"
                      class="input-with-select"
                      @keyup.enter.native="handleFilter"
                    >
                      <el-select
                        slot="prepend"
                        v-model="listQuery.keywordsKey"
                        placeholder="请选择"
                        style="width: 90px"
                        clearable
                      >
                        <el-option
                          v-for="item in keywordsKeyOptions"
                          :key="item.id"
                          :label="item.text"
                          :value="item.id"
                        />
                      </el-select>
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- 表单元素 开始 -->
              </el-row>
            </el-col>
            <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="search-btn">
              <el-button
                v-waves
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
              >
                {{ $t('common.search') }}
              </el-button>
              <el-button @click="handleResetFilter">{{
                $t('common.reset')
              }}</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 搜索区 结束 -->

      <!-- 按钮功能区 开始 -->
      <el-row :gutter="10" class="btn-box">
        <el-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          class="btnfunction-section-col"
        >
          <el-button
            plain
            type="danger"
            icon="el-icon-delete"
            @click="handleAllDelete()"
          >
            {{ $t('common.delete') }}
          </el-button>
        </el-col>
      </el-row>
      <!-- 按钮功能区 结束 -->

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        max-height="540"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" />
        <el-table-column
          :label="$t('common.id')"
          prop="id"
          sortable="custom"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('guestbook.customer_name')" align="center">
          <template slot-scope="{ row }">
            {{ row.customer_name }} 姓名
          </template>
        </el-table-column>
        <el-table-column :label="$t('guestbook.customer_email')" align="center">
          <template slot-scope="{ row }">
            {{ row.customer_email }} 888@qq.com
          </template>
        </el-table-column>
        <el-table-column :label="$t('guestbook.customer_tel')" align="center">
          <template slot-scope="{ row }">
            {{ row.customer_tel }} 188888888
          </template>
        </el-table-column>
        <el-table-column :label="$t('guestbook.customer_message')">
          <template slot-scope="{ row }">
            {{ row.customer_message }} 留言信息
          </template>
        </el-table-column>
        <el-table-column :label="$t('guestbook.remark')">
          <template slot-scope="{ row }">
            {{ row.remark }} 管理员备注
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.status')"
          class-name="status-col"
          width="100"
        >
          <template slot-scope="{ row }">
            <span class="link-type">
              {{ row.status }}
              <!-- 未处理、已处理 -->
            </span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.created_at')"
          width="150px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.updated_at')"
          width="150px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.operation')"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
          fixed="right"
        >
          <template slot-scope="{ row, $index }">
            <span
              class="link-type"
              :title="$t('common.edit')"
              @click="handleEdit(row)"
            >
              <i class="el-icon-edit" />
            </span>&nbsp;
            <span
              class="link-type"
              :title="$t('common.delete')"
              @click="handleDelete(row, $index)"
            >
              <i class="el-icon-delete" />
            </span>&nbsp;
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 开始 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
      <!-- 分页功能 结束 -->
    </div>

    <!-- 编辑 开始 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="editRules"
        :model="editForm"
        label-position="left"
        label-width="100px"
      >
        <el-form-item :label="$t('common.id')">
          {{ editForm.id }}
        </el-form-item>
        <el-form-item :label="$t('guestbook.customer_name')">
          {{ editForm.customer_name }} 姓名
        </el-form-item>
        <el-form-item :label="$t('guestbook.customer_email')">
          {{ editForm.customer_email }} 888@qq.com
        </el-form-item>
        <el-form-item :label="$t('guestbook.customer_tel')">
          {{ editForm.customer_tel }} 188888888
        </el-form-item>
        <el-form-item :label="$t('guestbook.customer_message')">
          {{ editForm.customer_message }} 留言信息
        </el-form-item>
        <el-form-item :label="$t('common.created_at')">
          {{ editForm.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }} 2010-11-14 05:41
        </el-form-item>
        <el-form-item :label="$t('guestbook.remark')" prop="remark">
          <el-input
            v-model="editForm.remark"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            :placeholder="$t('guestbook.remark_tips')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateData()">
          {{ $t('common.confirm') }}
        </el-button>
        <el-button @click="dialogFormVisible = false">
          {{ $t('common.cancel') }}
        </el-button>
      </div>
    </el-dialog>
    <!-- 编辑 结束 -->
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import i18n from '@/lang'

export default {
  name: 'GuestbookIndex',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        sort: '+id',
        cate_id: '',
        status: '',
        keywordKey: '',
        keywordValue: ''
      },
      // 来源数据字典接口
      statusOptions: [
        { id: 1, text: '已处理' },
        { id: 2, text: '未处理' }
      ],
      keywordsKeyOptions: [{ id: 'customer_name', text: '客户姓名' }, { id: 'customer_email', text: '电子邮箱' }, { id: 'customer_tel', text: '联系电话' }],
      multipleSelection: [],
      // 路由参数
      routerParams: {},
      dialogFormVisible: false,
      editForm: {},
      editRules: {
        remark: [{ required: true, message: i18n.t('guestbook.remark_tips') }]
      }
    }
  },
  created() {
    this.routerParams = this.$route.params
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.total

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 重置搜索表单
    handleResetFilter() {
      this.listQuery.page = 1
      this.$refs['listQuery'].resetFields()
      this.getList()
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    handleDelete(row, index) {
      this.$confirm(
        i18n.t('common.delete_confirm_tips'),
        i18n.t('common.warm_tips'),
        {
          confirmButtonText: i18n.t('common.confirm'),
          cancelButtonText: i18n.t('common.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          // 这里需请求删除接口...
          // this.list.splice(index, 1)
          this.$message.success(i18n.t('common.deleted'))
        })
        .catch(() => {
          this.$message.info(i18n.t('common.canceled'))
        })
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 删除所有
    handleAllDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(i18n.t('common.delete_items_tips'))
        return
      }
      this.$confirm(
        i18n.t('common.delete_confirm_tips'),
        i18n.t('common.warm_tips'),
        {
          confirmButtonText: i18n.t('common.confirm'),
          cancelButtonText: i18n.t('common.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          // 这里需请求删除接口...
          // this.list.splice(index, 1)
          this.$message.success(i18n.t('common.deleted'))
        })
        .catch(() => {
          this.$message.info(i18n.t('common.canceled'))
        })
    },
    handleEdit(row) {
      this.editForm = Object.assign({}, row) // copy obj
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 更新
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // const tempData = Object.assign({}, this.editForm)
          // this.remark = tempData.remark
          // 更新接口
        }
      })
    }
  }
}
</script>
<style scoped  lang="scss" >
</style>

